*{
  margin: 0;
  padding: 0;
}


/* css 设置body的最小高度是100%，满屏显示 */
/* https://blog.csdn.net/weixin_42896278/article/details/87815321 */
html { height: 100%; overflow: auto; }
body { min-height: 100%; }

/* 方法二 */
/* https://www.cnblogs.com/Anne3/p/8178312.html */


body {
  /* 重要代码： */
  display: flex;
  flex-direction: column;/* 竖轴是主轴 */

  /* height: 100%;  不能这样 */
}

header {
  background-color: lawngreen;
}


main {
  /* flex: 1 0 auto; */
  flex-grow: 1; /*容器有剩余空间时，main区域会扩展*/
  flex-shrink: 0; /*容器有不足空间时，main区域不会收缩*/
  flex-basis: auto; /*main区域高度的基准值为main内容自动高度*/

  background-color: lightcyan;
}


footer {
  /* 重要代码： */
  margin-top: auto;

  background-color: lemonchiffon;
}

